<html>
<head>
  <title>OmniDB</title>
  <link rel="shortcut icon" type="image/x-icon" href="/static/OmniDB_app/images/favicon.ico"/>

	<link rel="stylesheet" type="text/css" href="/static/OmniDB_app/css/style.css?v2.3.0"            />
	<link rel="stylesheet" type="text/css" href="/static/OmniDB_app/css/handsontable.full.css?v2.3.0"/>
	<link rel="stylesheet" type="text/css" href="/static/OmniDB_app/css/msdropdown/dd.css?v2.3.0"    />
  <link rel="stylesheet" type="text/css" href="/static/OmniDB_app/lib/tabs/css/tabs.css?v2.3.0"    />
  <link rel="stylesheet" type="text/css" href="/static/OmniDB_app/css/jquery.qtip.min.css?v2.3.0"  />

  <link rel="stylesheet" href="/static/OmniDB_app/css/explain/bootstrap.css">
  <link rel="stylesheet" href="/static/OmniDB_app/css/explain/main.css">

  {% block include_css %}
  {% endblock %}

</head>
<body>

	<div class="header">
		<div class="header_menu">
			<img src="/static/OmniDB_app/images/omnidb.png" />
			<ul>
        {% block header_menu %}
        {% endblock %}
			</ul>
			<div style="position: absolute; right: 0px; top: 0px;">
				<ul>
          {% if not desktop_mode %}
  					<li style="color: #F1F7FF; padding-right: 10px;">{{ session.v_user_name }}</li>
            {% if session.v_super_user == 1 %}
    					<li style="padding-right: 10px;"><img title="Manage users" style="vertical-align: middle; cursor: pointer;" onclick="listUsers();" src="/static/OmniDB_app/images/users.png"/></li>
    				{% endif %}
          {% endif %}
					<li style="padding-right: 10px;"><img title="User settings" style="vertical-align: middle; cursor: pointer;" onclick="showConfigUser();" src="/static/OmniDB_app/images/gear.png"/></li>
          {% block header_actions %}
          {% endblock %}
					<li style="padding-right: 10px;"><img title="About" style="vertical-align: middle; cursor: pointer;" onclick="showAbout();" src="/static/OmniDB_app/images/about.png"/></li>
          {% if not desktop_mode %}
          <li><a href="../logout">Logout</a></li>
          {% endif %}
				</ul>
			</div>
		</div>
	</div>

  {% block content %}
  {% endblock %}

	<div id="div_config_user" style="display: none;">
	    <div class="modal_background_dark">
	        <div class ="white_box" style="width: 40%; left: 30%; top: 30%;">
	            <a class="modal-closer" onclick="hideConfigUser()">x</a>

	            <div id="config_tabs" style='margin-top: 10px; margin-left: 10px; margin-right: 10px; margin-bottom: 10px;'>
	                <ul>
	                <li id="config_tabs_tab1">Editor</li>
                  {% if not desktop_mode %}
	                 <li id="config_tabs_tab2">User</li>
                  {% endif %}
	  				</ul>
	  				<div id="div_config_tabs_tab1">

	  					<div style="margin: 30px; height: auto; top: 0px; bottom: 0px; left: 0px; right: 0px;">
		                <div style="text-align: center;">
		                <div style="margin-bottom: 10px;">Editor font size</div>
		                <select id="sel_editor_font_size" style="width: 200px; margin-bottom: 20px;">
		                	<option value="10">10</option>
		                	<option value="11">11</option>
		                	<option value="12">12</option>
		                	<option value="13">13</option>
		                	<option value="14">14</option>
		                	<option value="15">15</option>
		                	<option value="16">16</option>
		                	<option value="17">17</option>
		                	<option value="18">18</option>
		                </select>
                    <div style="margin-bottom: 10px;">Editor theme</div>
		                <select id="sel_editor_theme" style="width: 200px; margin-bottom: 20px;">
		                	<option value="1">(Light) OmniDB</option>
		                	<option value="2">(Light) Chrome</option>
		                	<option value="3">(Light) Clouds</option>
		                	<option value="4">(Light) Crimson Editor</option>
		                	<option value="5">(Light) Dawn</option>
		                	<option value="6">(Light) Dreamweaver</option>
		                	<option value="7">(Light) Eclipse</option>
		                	<option value="8">(Light) Github</option>
		                	<option value="9">(Light) Iplastic</option>
		                	<option value="10">(Light) Katzenmilch</option>
		                	<option value="11">(Light) Kuroir</option>
		                	<option value="12">(Light) Solarized Light</option>
		                	<option value="13">(Light) SQL Server</option>
		                	<option value="14">(Light) Textmate</option>
		                	<option value="15">(Light) Tomorrow</option>
		                	<option value="16">(Light) XCode</option>
							        <option value="17">(Dark) OmniDB Dark</option>
		                	<option value="18">(Dark) Ambiance</option>
		                	<option value="19">(Dark) Chaos</option>
		                	<option value="20">(Dark) Clouds Midnight</option>
		                	<option value="21">(Dark) Cobalt</option>
		                	<option value="22">(Dark) Idle Fingers</option>
		                	<option value="23">(Dark) KR Theme</option>
		                	<option value="24">(Dark) Merbivore</option>
		                	<option value="25">(Dark) Merbivore Soft</option>
		                	<option value="26">(Dark) Mono Industrial</option>
		                	<option value="27">(Dark) Monokai</option>
		                	<option value="28">(Dark) Pastel On Dark</option>
		                	<option value="29">(Dark) Solarized Dark</option>
		                	<option value="30">(Dark) Terminal</option>
		                	<option value="31">(Dark) Tomorrow Night</option>
		                	<option value="32">(Dark) Tomorrow Night Blue</option>
		                	<option value="33">(Dark) Tomorrow Night Bright</option>
		                	<option value="34">(Dark) Tomorrow Night 80s</option>
		                	<option value="35">(Dark) Twilight</option>
		                	<option value="36">(Dark) Vibrant Ink</option>
		                </select>
		                </div>
                    <div style="text-align: center;">
                      <button onclick="saveConfigUser();">Save Changes</button>
                    </div>
		                </div>


	  				</div>
            {% if not desktop_mode %}
	  				<div id="div_config_tabs_tab2">
            {% else %}
            <div id="div_config_tabs_tab2" style="display: none;">
            {% endif %}
	  					<div style="margin: 30px; height: auto; top: 0px; bottom: 0px; left: 0px; right: 0px;">
		                	<div style="text-align: center;">
		                		<div style="margin-bottom: 10px;">New Password</div>
		                		<input id="txt_new_pwd" type="password" style="width: 200px; margin-bottom: 20px;">
		                	</div>
		                	<div style="text-align: center;">
		                		<div style="margin-bottom: 10px;">Confirm New Password</div>
		                		<input id="txt_confirm_new_pwd" type="password" style="width: 200px; margin-bottom: 20px;">
		                	</div>
		                	<div style="text-align: center; display: none;">
		                		<div style="margin-bottom: 10px;">Enable OmniChat</div>
		                		<input id="chk_enable_chat" type="checkbox" style="width: 200px; margin-bottom: 20px;">
		                	</div>
		                	<div style="text-align: center;">
			                	<button onclick="saveConfigUser();">Save Changes</button>
		                	</div>
		                </div>
	  				</div>
				</div>
	        </div>
	    </div>
	</div>

    <div id="div_about" style="display: none;">
        <div class="modal_background_dark">
            <div class ="white_box" style="width: 40%; left: 30%; top: 30%;">
                <a class="modal-closer" onclick="hideAbout()">x</a>
                <div style="width: 100%; text-align: center;">
                	<div style="margin: 20px;"><h1>{{ omnidb_version }}</h1></div>
                	<div style="margin: 20px;">
                		<img src="/static/OmniDB_app/images/postgresql_medium.png" title="PostgreSQL"/>
                    <!--<img src="/static/OmniDB_app/images/oracle_medium.png" title="Oracle"/>
                		<img src="/static/OmniDB_app/images/mysql_medium.png" title="MySQL"/>
                		<img src="/static/OmniDB_app/images/sqlserver_medium.png" title="SQL Server"/>
                		<img src="/static/OmniDB_app/images/firebird_medium.png" title="Firebird"/>
                		<img src="/static/OmniDB_app/images/sqlite_medium.png" title="SQLite"/>
                		<img src="/static/OmniDB_app/images/access_medium.png" title="Microsoft Access"/>
                		<img src="/static/OmniDB_app/images/mariadb_medium.png" title="MariaDB"/>
			              <img src="/static/OmniDB_app/images/filedb_medium.png" title="Spartacus FileDB"/>-->
                	</div>
                	<div style="margin: 20px;"><a onclick="showWebsite('OmniDB', 'https://www.omnidb.org')" >www.omnidb.org</a></div>
                  <div style="margin: 20px;">
                    <h2>Primary Supporter:</h2>
                    <a onclick="showWebsite('2ndQuadrant', 'https://www.2ndquadrant.com')" ><img style="width: 120px;" src="/static/OmniDB_app/images/supporters/2ndquadrant.png" title="2ndQuadrant"/></a>
                  </div>
                </div>
            </div>
        </div>
    </div>

    <div id="div_users" style="display:none;">
        <div class="modal_background_dark">
            <div class ="white_box" style="width: 50%; left: 25%; top: 20%; font-size: 11px; font-family: sans-serif;">
              <a class="modal-closer" onclick="hideUsers()">x</a>
              <div style='margin-left:10px; margin-top: 10px; display:inline-block;'>
            		<button onclick="newUser()">New User</button>
            	</div>
              <div id='div_save_users' style='visibility: hidden; display:inline-block;'>
            		<button onclick="saveUsers()">Save Data</button>
            	</div>
              <div style="padding: 10px;">
              	<div id='div_user_list' style='width: 100%; height: 200px; overflow: auto;'></div>
              </div>
            </div>
        </div>
    </div>

    <div id="div_edit_content" style="display: none;">
        <div class="modal_background_dark">
            <div class ="white_box" style="width: 90%; height: 90%; left: 5%; top: 5%;">
                <a class="modal-closer" onclick="hideEditContent()">x</a>

                <div style="height: 90%; padding: 30px;">
                  <div id="txt_edit_content" style="width: 100%; height: 100%; font-size: 12px; border: 1px solid rgb(195, 195, 195);">
                  </div>
                </div>

            </div>
        </div>
    </div>


  <div id="div_error" style="display:none;">
      <div class="modal_background_dark" style="z-index: 2000">
          <div class ="white_box" style="width: 90%; height: 90%; left: 5%; top: 5%; z-index: 2000;">
              <a class="modal-closer" onclick="hideError()">x</a>
              <div id="div_error_msg" class="error_text" style="height:100%; width:100%; margin-top:20px; text-align: center;"></div>
          </div>
      </div>
  </div>

  <div id="div_alert" style="display:none;">
      <div class="modal_background_dark">
          <div class ="white_box" style="width: 40%; height: 20%; left: 30%; top: 40%;">
              <div id="div_alert_content" style="height:100%; width:100%;"></div>
          </div>
      </div>
  </div>

  <div id="div_password_prompt" style="display: none;">
      <div class="modal_background_dark" style="z-index: 2000">
          <div class ="white_box" style="width: 50%; left: 25%; top: 20%; z-index: 2000; text-align: center;">
              <a id="bt2_password_prompt_cancel" class="modal-closer">x</a>
              <img src="/static/OmniDB_app/images/keys.png" style='margin-top: 20px;'/>
              <div id="div_password_prompt_msg" class="error_text" style="margin:20px 0px 20px 0px; padding: 0px 20px 0px 20px; max-height: 50px; overflow-y: auto;"></div>
              <div>
                <input id="txt_password_prompt" type="password" placeholder="Password" style="margin-bottom:20px; text-align: center;"/>
              </div>
              <div style="margin-bottom: 20px;">
                <button id="bt_password_prompt_ok">Ok</button>
                <button id="bt1_password_prompt_cancel">Cancel</button>
              </div>
          </div>
      </div>
  </div>

  <div class="div_loading"></div>

  <script type="text/javascript" src="/static/OmniDB_app/js/explain/react.js?v2.3.0"          ></script>
  <script type="text/javascript" src="/static/OmniDB_app/js/explain/react-dom.js?v2.3.0"      ></script>
  <script type="text/javascript" src="/static/OmniDB_app/js/explain/d3.js?v2.3.0"             ></script>
  <script type="text/javascript" src="/static/OmniDB_app/js/explain/pgplan.js?v2.3.0"         ></script>

  <script type="text/javascript" src="/static/OmniDB_app/js/jquery-1.11.2.min.js?v2.3.0"      ></script>
  <script type="text/javascript" src="/static/OmniDB_app/js/jquery.qtip.min.js?v2.3.0"        ></script>
	<script type="text/javascript" src="/static/OmniDB_app/js/jquery.dd.min.js?v2.3.0"          ></script>
  <script type="text/javascript" src="/static/OmniDB_app/lib/ace/ace.js?v2.3.0"               ></script>
  <script type="text/javascript" src="/static/OmniDB_app/lib/ace/mode-sql.js?v2.3.0"          ></script>
  <script type="text/javascript" src="/static/OmniDB_app/lib/ace/ext-language_tools.js?v2.3.0"></script>
  <script type="text/javascript" src="/static/OmniDB_app/lib/tabs/lib/tabs.js?v2.3.0"         ></script>
	<script type="text/javascript" src="/static/OmniDB_app/js/handsontable.full.js?v2.3.0"      ></script>
  <script type="text/javascript" src="/static/OmniDB_app/js/NotificationControl.js?v2.3.0"    ></script>
  <script type="text/javascript" src="/static/OmniDB_app/js/AjaxControl.js?v2.3.0"            ></script>
  <script type="text/javascript" src="/static/OmniDB_app/js/WebSocketControl.js?v2.3.0"       ></script>
  <script type="text/javascript" src="/static/OmniDB_app/js/Renderers.js?v2.3.0"              ></script>
  <script type="text/javascript" src="/static/OmniDB_app/js/HeaderActions.js?v2.3.0"          ></script>
  <script type="text/javascript" src="/static/OmniDB_app/js/Passwords.js?v2.3.0"              ></script>
  <script type="text/javascript" src="/static/OmniDB_app/js/Users.js?v2.3.0"                  ></script>

  <script type="text/javascript">

	//Global variables
	var v_editor_theme = '{{ session.v_editor_theme }}';
	var	v_theme_type = '{{ session.v_theme_type }}';
	var	v_theme_id = {{ session.v_theme_id }};
	var v_editor_font_size = {{ session.v_editor_font_size }};
	var v_user_id = {{ session.v_user_id }};
  var v_user_key = '{{ session.v_user_key }}';
  var v_user_name = '{{ session.v_user_name }}';
	var v_enable_omnichat = parseInt({{ session.v_enable_omnichat }});

  var v_menu_item = '{{ menu_item }}'
  $('#menu_' + v_menu_item).addClass('header_a_selected');

  var ht;
  var network;
  var v_connTabControl;
  var v_usersObject;
  var v_editDataObject;
  var v_canEditContent;
  var v_editContentObject;
  var v_database_list = null;
  var v_completer_ready = true;
  var v_tree_object;

  </script>

  {% block include %}
  {% endblock %}

</body>
</html>
{% csrf_token %}
